<template>
	<view class="content">
		<ul class="nav">
			<li class="nav-list" v-for="item,index in navList" :key="item" :class="{active:tabIndex == index}"
				@click="tabIndex = index">{{item}}</li>
		</ul>
		<!-- 内容 -->
		<scroll-view scroll-y="true" class="con-scroll">
			<!-- 全选 -->
			<view class="con-title" v-if="tabIndex == 0">
				<label class="radio" @click="checkAll">
					<radio :checked="selectAll" /><text>全选</text>
				</label>
				<text @click="delSelect">删除所选</text>

			</view>
			<!-- 内容列表  -->  
			<!-- @check    @changeStatus都是自定义事件 -->
			<my-card v-for="(item,index) in list" :key="index" :itemObj="item" :isRadio="tabIndex==0" @checks="checksFn(index)" @changeStatus="changeStatusFn(index)"></my-card>

		</scroll-view>


	</view>
</template>

<script>
	import msg from '../../static/data.js'
	import myCard from '../../components/myCart.vue'
	export default {
		data() {
			return {
				navList: ["全部", "未付款", '已付款', '已发货', "已完成"],
				tabIndex: 0, //保存下标
				list: [], //存放列表数据
				selectAll:false,//全选按钮的初始状态
			}
		},
		components: {
			myCard
		},
		onLoad() {
			console.log(msg);
			this.list = msg.goods.map(item => {
				return {
					...item,
					check: false //新加一个属性，用来表示选中不选中的状态 默认就是不选中
				}
			})
			console.log(this.list);
		},
		methods: {
           // 全选
		   checkAll(){
			   // 手动取反
			   this.selectAll = !this.selectAll
			   this.list.forEach(item=>{
				   // 把全选按钮的状态赋值给 数据的每一个
				   item.check = this.selectAll
			   })
		   },
		   // 反选
		   checksFn(i){
			   // 取反
			   this.list[i].check = !this.list[i].check
			   
			   this.selectAll = this.list.every(item=>item.check)
		   },
		   // 删除所选
		   delSelect(){
			   this.list = this.list.filter(item=>!item.check)
		   },
		   // 修改状态
		   changeStatusFn(i){
			   // 状态为3 说明你点击的已经是已完成里面的数据了
			   // 状态0 是未付款  1是已付款  2是已发货  3 是已完成
			   if(this.list[i].state == 3){
				   this.list[i].state = 0
			   }else{
				   this.list[i].state++
			   }
			   // 再做筛选
			   this.list = msg.goods.filter(item=>item.state== this.tabIndex-1)
			   
		   }
		},
		watch: {
			tabIndex(newVal) {
				console.log(newVal);
				if (newVal == 0) {
					// 展示所有的内容
					this.list = msg.goods.map(item => {
						return {
							...item,
							check: false //新加一个属性，用来表示选中不选中的状态 默认就是不选中
						}
					})
				} else {
                   this.list = msg.goods.filter(item=>item.state == newVal-1)
				}
			}
		}
	}
</script>

<style lang="scss">
	.nav {
		display: flex;
		height: 100rpx;
		background-color: #7e953a;
		color: #fff;
		align-items: center;
		justify-content: space-around;

		.active {
			color: blue;
		}

	}

	.con-scroll {
		height: calc(100vh - 100rpx);
		padding: 10px 16px;
		box-sizing: border-box;

		.con-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
</style>
